
(function () {
  // ...
  let body = document.body
  let table = document.querySelector('table')
  let tbody = document.querySelector('tbody')
  let catechoose = document.querySelector('.catechoose')
  let statuschoose = document.querySelector('.statuschoose')
  let icons = document.querySelectorAll('.header .iconfont')
  let isCateOpen = false
  let isStatusOpen = false
  let statusList = document.querySelector('.statuslist')
  let cateList = document.querySelector('.catelist')
  let btnreset = document.querySelector('.btnreset')
  let cateContent = document.querySelector('.catecontent')
  let statusContent = document.querySelector('.statuscontent')
  let btnchoose = document.querySelector('.btnchoose')
  let delPage = document.querySelector('.delPage')
  let btnCancel = document.querySelector('.cancelbtn')
  let btnConfirm = document.querySelector('.confirmbtn')
  let cross = document.querySelector('.cross')
  let publish = document.querySelector('.publish')
  let chooseId = -1
  let delId = -1
  let detailId = -1

  // 获取文章列表
  async function initArticle(cate = '', status = '', page = 1){
    let res = await getArticle(cate, status, page)
    console.log(res);
    renderTable(res)
  }
  initArticle()

  // 获取文章类别
  async function initCate(){
    let res = await getCate()
    renderCate(res)
  }
  initCate()

  // 渲染文章类别列表
  function renderCate({data:{data}}){
    let li = ''
    if(data.length){
      li = data.map(({cate_name, id}) => {
        return `
        <li data-id = ${id}>${cate_name}</li>
        `
      }).join('')
    }else{
      li = `<li>暂无数据</li>`
      cateList.removeEventListener('click', cateClick)
    }
    cateList.innerHTML = li
  }


  // 渲染文章列表表格
  function renderTable({data:{data}}){
    console.log(111);
    if(data.length){
      if(document.querySelector('.empty')){
        document.querySelector('.empty').remove()
      }
      let tr = data.map(({id, cate_name, pub_date, state, title}) => {
        return `
        <tr>
          <td><span data-id = ${id}>${title}</span></td>
          <td>${cate_name}</td>
          <td>${getTime(pub_date)}</td>
          <td>${state}</td>
          <td><button data-id=${id} class="del">删除</button></td>
        </tr>
        `
      }).join('')
      tbody.innerHTML = tr
    }else{
      if(!document.querySelector('.empty')){
        let div = `
        <div class="empty">暂无文章</div>
        `
        table.insertAdjacentHTML('afterEnd', div)
        tbody.innerHTML = ''
      }
    }
  }

  // 根据获取的数据得到需要的时间格式
  function getTime(str){
    return moment(str).format('YYYY-MM-DD HH:mm')
  }

  catechoose.addEventListener('click', function(e){
    e.stopPropagation()
    if(isCateOpen){
      icons[0].style.transform = 'rotate(0deg)'
      cateList.style.display = 'none'
    }else{
      icons[0].style.transform = 'rotate(-180deg)'
      console.log();
      cateList.style.display = 'block'
    }
    isCateOpen = !isCateOpen
  })

  // 点击文章文章分类
  statuschoose.addEventListener('click', function(e){
    e.stopPropagation()
    if(isStatusOpen){
      icons[1].style.transform = 'rotate(0deg)'
      statusList.style.display = 'none'
    }else{
      icons[1].style.transform = 'rotate(-180deg)'
      statusList.style.display = 'block'
    }
    isStatusOpen = !isStatusOpen
  })

  // 点击选择框展示可选列表
  body.addEventListener('click', function(e){
    if(e.target.tagName !== 'LI'){
      if(statusList.style.display === 'block'){
        statusList.style.display = 'none'
        icons[1].style.transform = 'rotate(0deg)'
        isStatusOpen = false
      }else if(cateList.style.display === 'block'){
        cateList.style.display = 'none'
        icons[0].style.transform = 'rotate(0deg)'
        isCateOpen = false
      }
    }
  })

  // 点击状态选择列表切换发布状态
  statusList.addEventListener('click', function(e){
    statusContent.textContent = e.target.textContent
    statusList.style.display = 'none'
    icons[1].style.transform = 'rotate(0deg)'
    isStatusOpen = false
  })

  // 点击分类列表切换分类
  cateList.addEventListener('click', cateClick)

  function cateClick(e){
    cateContent.textContent = e.target.textContent
    chooseId = e.target.dataset.id
    cateList.style.display = 'none'
    icons[0].style.transform = 'rotate(0deg)'
    isCateOpen = false
  }

  // 重置按钮点击事件
  btnreset.addEventListener('click', function(){
    cateContent.textContent = '请选择分类'
    statusContent.textContent = '请选择状态'
    statusList.style.display = 'none'
    cateList.style.display = 'none'
    icons.forEach(icon => icon.style.transform = 'rotate(0deg)')
    isCateOpen = false
    isStatusOpen = false
  })

  // 筛选按钮点击事件
  btnchoose.addEventListener('click', ChooseArt)

  function ChooseArt(e, page = 1){
    if(cateContent.textContent === '请选择分类' && statusContent.textContent === '请选择状态'){
      initArticle('', '', page)
    }else if (cateContent.textContent !== '请选择分类' && statusContent.textContent === '请选择状态'){
      initArticle(chooseId, '', page)
    }else if(cateContent.textContent !== '请选择分类' && statusContent.textContent !== '请选择状态'){
      initArticle(chooseId, statusContent.textContent, page)
    }else{
      initArticle('', statusContent.textContent, page)
    }
  }

  // 删除按钮点击
  tbody.addEventListener('click', handleDel)

  function handleDel(e){
    if(e.target.tagName === 'BUTTON' && e.target.textContent === '删除'){
      delPage.style.opacity = '1'
      delPage.style.top = '50%'
      delId = +e.target.dataset.id
    }
  }

  // 点击标题查看文章详情
  // 调用index页面的rederDetail函数
  tbody.addEventListener('click', async function(e){
    if(e.target.tagName === 'SPAN'){
      detailId = e.target.dataset.id
      window.parent.rederDetail(detailId)
    }
  })

  // 取消删除事件
  btnCancel.addEventListener('click', canceldel)

  function canceldel(){
    delPage.style.opacity = '0'
    delPage.style.top = '45%'
  }

  // 删除模态框右上角小叉取消的点击事件
  cross.addEventListener('click', function(){
    btnCancel.click()
  })

  // 确定删除的点击事件
  btnConfirm.addEventListener('click', async function(){
    let res = await delArticle(delId)
    let {data:{code, message}} = res
    window.parent.appear(code, message)
    setTimeout(() => {
      window.parent.disappear()
    }, 2000);
    initArticle()
    canceldel()
  })

  // 点击发布按钮跳转发布文章
  publish.addEventListener('click', function (){
    window.parent.showModal()
  })

  // 分页器
  new Pagination({
    element: '#pages', // 元素
    type: 2, // 样式类型，可选[1,2]
    pageIndex: 1, // 初始页码
    pageSize: 5, // 每页数量
    pageCount: 9, // 页码数量
    total: 100, // 数据总条数
    jumper: false, // 显示输入框跳转
    singlePageHide: false, // 只有一页时不显示分页
    prevText: '上一页', // 上一页文字
    nextText: '下一页', // 下一页文字
    disabled: true, // 是否显示禁用
    currentChange: function (index) {
      ChooseArt('', index)
    }
  });
})()